<template>
  <!-- 电话号码改动 -->
  <div>
    <van-popup v-model:show="show" round :close-on-click-overlay="false">
      <div class="changePhonePage">
        <div class="changePhoneTitle">{{ title }}</div>
        <van-row class="changePhoneView" style="">
          <van-field v-model="newPhone" label="手机号码" placeholder="请输入手机号码" />
        </van-row>
        <van-row class="changePhoneView">
          <van-cell-group inset>
            <van-field v-model="captcha" placeholder="请输入图形验证码">
              <template #button>
                <img class="uuidImg" :src="imgUrl" @click="uuidClick" />
              </template>
            </van-field>
          </van-cell-group>
        </van-row>
        <van-row class="changePhoneView">
          <van-col class="smsCodeView">
            <van-field v-model="smsCode" label="验证码" placeholder="验证码" />
          </van-col>
          <van-col class="smsCodeText">
            <span class="smsCodeSpan" v-show="!showCountDown" @click="getSms">获取验证码</span>
            <van-count-down
              v-show="showCountDown"
              ref="countDown"
              :auto-start="false"
              @finish="countDownFinish"
              :time="time"
              format="ss秒"
              style="line-height: .64rem;color:#ff5500;"
            />
          </van-col>
        </van-row>
        <div class="changePhoneButVuew">
          <div class="changePhoneCancel" @click="phoneCancel">取消</div>
          <div class="changePhoneBut" @click="beforeClose">提交</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { baseApi } from '@/config'
// 请求接口
import { UpdatePhone, GetCodeSms,bindMobile } from '@/api/personal.js'
export default {
  name: 'ChangePhone',
  props: {
    show: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    // 组件标题
    titles: {
      type: String,
      default: '修改手机号'
    }
  },
  data() {
    return {
      updatePhoneShow: true,
      newPhone: '',
      smsCode: '',
      time: 60000,
      showCountDown: false,
      captcha: '',
      uuid: '',
      imgUrl: '',
      title: this.titles
    }
  },
  created() {
    this.uuidImgData()
    console.log(1)
  },
  methods: {
    getUUID() {
      return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, c => {
        return (c === 'x' ? (Math.random() * 16) | 0 : 'r&0x3' | '0x8').toString(16)
      })
    },
    uuidImgData() {
      this.uuid = this.getUUID()
      this.imgUrl = baseApi + '/app/user/captcha.jpg?uuid=' + this.uuid + '&token=' + this.$getStore('token')
    },
    uuidClick() {
      this.uuidImgData()
    },
    phoneCancel() {
      this.cancelData()
      this.$emit('phoneCancel')
    },
    countDownFinish() {
      this.time = 60000
      this.showCountDown = false
      this.$refs.countDown.reset()
    },
    cancelData() {
      this.newPhone = ''
      this.captcha = ''
      this.uuid = ''
      this.uuidImgData()
    },
    getSms() {
    console.log(2)
      if (!/^1[3456789]\d{9}$/.test(this.newPhone)) {
        this.showToast('请输入正确的手机号码')
        return false
      }
      if (!this.captcha) {
        this.showToast('请输入图形验证码')
        return false
      }
      const data = {
        phone: this.newPhone,
        code: this.captcha,
        uuid: this.uuid,
        configId: 'note_code'
      }
      GetCodeSms(data)
        .then(res => {
          if (res.code === 0) {
            this.showToast(res.msg)
            this.$refs.countDown.start()
            this.showCountDown = true
          } else {
            this.showToast(res.msg)
            this.uuidImgData()
          }
        })
        .catch(res => {
          this.cancelData()
          this.showToast(res.msg)
        })
    },
    beforeClose() {
      // 点击的是确认按钮
      // 校验手机号码
      if (!/^1[3456789]\d{9}$/.test(this.newPhone)) {
        this.showToast('请输入正确的手机号码')
        return false
      }
      if (!this.captcha) {
        this.showToast('请填写图形验证码')
        return false
      }
      if (!this.smsCode) {
        this.showToast('请填写短信验证码')
        return false
      }
      // 绑定手机号
      const data = {
        mobile: this.newPhone,
        code: this.smsCode,
      }
      bindMobile(data)
        .then(res => {
          if (res.code !== 0) {
            this.showToast(res.msg)
            this.smsCode = ''
            this.newPhone = ''
            this.cancelData()
          }else{
            this.showToast(res.msg)
            this.smsCode = ''
            this.newPhone = ''
            this.phoneCancel()
          }
        })
        .catch(res => {
          this.showToast(res.msg)
            this.smsCode = ''
            this.newPhone = ''
          this.cancelData()
        })
    },
    showToast(msg) {
      this.$toast({
        message: msg,
        position: 'center',
        duration: 2500
      })
    }
  }
}
</script>

<style>
.changePhoneCancel {
  width: 110px;
  height: 30px;
  font-size: 15px;
  text-align: center;
  letter-spacing: 2px;
  font-weight: bold;
  background: #cdcdcd;
  border-radius: 15px;
  line-height: 30px;
  color: #fff;
  margin-right: 40px;
}
.changePhoneButVuew {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.changePhoneBut {
  width: 110px;
  height: 30px;
  font-size: 15px;
  text-align: center;
  letter-spacing: 2px;
  font-weight: bold;
  background: #3289fe;
  border-radius: 15px;
  line-height: 30px;
  color: #fff;
}
.smsCodeSpan {
  background-color: #ff5500;
  color: #ffffff;
  font-size: 13px;
  float: right;
  padding: 2px 5px;
  line-height: 0.64rem;
}
.smsCodeText {
  width: 30%;
  padding-right: 10px;
  padding-top: 10px;
}
.smsCodeView {
  width: 70%;
}
.changePhoneView {
  margin-top: 6px;
  margin-bottom: 6px;
}
.uuidImg{
  width: 100px;
}
.changePhoneTitle {
  font-size: 16px;
  color: #333;
  text-align: center;
  margin-top: 10px;
  font-weight: bold;
}
.changePhonePage {
  width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
